@tablePrefixCls: rc-table;
@text-color: #666;
@font-size-base: 12px;
@line-height: 1.5;
@table-border-color: #e9e9e9;
@table-head-background-color: #f7f7f7;
@vertical-padding: 16px;
@horizontal-padding: 8px;
@border-width: 1px;
@border-color: red;
@border: @border-width solid @border-color;
@cell-padding: @vertical-padding @horizontal-padding;
@cell-margin: -@vertical-padding -@horizontal-padding;

.tableBorder() {
  border: @border;
  border-right: 0;
  border-bottom: 0;
}

.@{tablePrefixCls} {
  font-size: @font-size-base;
  color: @text-color;
  line-height: @line-height;
  box-sizing: border-box;
  position: relative;

  // ================= Global =================
  table {
    border-spacing: 0px;
    width: 100%;
  }

  th,
  td {
    padding: 0;

    position: relative;
    border: @border;
    border-top: 0;
    border-left: 0;
    transition: box-shadow 0.3s;

    padding: @cell-padding;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
  }

  // ================== Cell ==================
  &-cell {
    &-fix-left,
    &-fix-right {
      z-index: 1;
    }

    &-fix-right:last-child {
      border-right-color: transparent;
    }

    &-fix-left-last::after {
      pointer-events: none;
      content: '';
      transition: box-shadow 0.3s;
      position: absolute;
      top: 0;
      bottom: -1px;
      width: 20px;
      right: -1px;
      transform: translateX(100%);
    }

    &-fix-right-first {
      box-shadow: -1px 0 0 @border-color;

      &::after {
        pointer-events: none;
        content: '';
        transition: box-shadow 0.3s;
        position: absolute;
        top: 0;
        bottom: -1px;
        width: 20px;
        left: -1px;
        transform: translateX(-100%);
      }
    }

    &&-ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      // Fixed first or last should special process
      &.@{tablePrefixCls}-cell-fix-left-last,
      &.@{tablePrefixCls}-cell-fix-right-first {
        overflow: visible;

        .@{tablePrefixCls}-cell-content {
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
        }
      }
    }
  }

  &-ping-left {
    .@{tablePrefixCls}-cell-fix-left-last::after {
      box-shadow: inset 10px 0 8px -8px green;
    }
  }

  &-ping-right {
    .@{tablePrefixCls}-cell-fix-right-first::after {
      box-shadow: inset -10px 0 8px -8px green;
    }
  }

  // ================= Expand =================
  &-expand-icon-col {
    width: 60px;
  }

  &-row-expand-icon-cell {
    text-align: center;
  }

  // ================= Header =================
  thead {
    td,
    th {
      background: @table-head-background-color;
      text-align: center;
    }

    .@{tablePrefixCls}-cell-scrollbar::after {
      position: absolute;
      content: '';
      top: 0;
      bottom: 0;
      left: -1px;
      width: 1px;
      background: @table-head-background-color;
    }
  }

  &-header {
    .tableBorder();
  }

  // ================= Empty ==================
  &-placeholder {
    text-align: center;
  }

  // ================== Body ==================
  tbody {
    tr {
      td,
      th {
        background: #fff;
      }
    }
  }

  &-content {
    .tableBorder();
    border-radius: 5px 0 0 0;
  }

  &-body {
    .tableBorder();
    border-top: 0;
  }

  &-fixed-column &-body::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: @border;
    z-index: 1;
  }

  // ================= Expand =================
  &-expanded-row {
    .@{tablePrefixCls}-cell {
      box-shadow: inset 0 8px 8px -8px green;
    }

    &-fixed {
      box-sizing: border-box;
      margin: @cell-margin;
      padding: @cell-padding;
      margin-right: -@horizontal-padding - 2 * @border-width;

      &::after {
        content: '';
        position: absolute;
        width: 0;
        top: 0;
        bottom: 0;
        right: 1px;
        border-right: @border;
      }
    }
  }

  &-row-expand-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    color: #aaa;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    line-height: 16px;

    &.@{tablePrefixCls}-row-expanded::after {
      content: '-';
    }

    &.@{tablePrefixCls}-row-collapsed::after {
      content: '+';
    }

    &.@{tablePrefixCls}-row-spaced {
      visibility: hidden;
    }
  }

  // ================= Title ==================
  &-title {
    border: @border;
    border-bottom: 0;
    padding: @cell-padding;
  }

  // ================= Footer =================
  &-footer {
    border: @border;
    border-top: 0;
    padding: @cell-padding;
  }
}
